ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರಿಗಳು: ದೃಢವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಆಕರ್ಷಕ ದೋಷ ನಿರ್ವಹಣಾ ತಂತ್ರಗಳು

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ಕ್ರಿಯಾತ್ಮಕ ಜಗತ್ತಿನಲ್ಲಿ, ದೃಢವಾದ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಅತ್ಯಗತ್ಯ. ರಿಯಾಕ್ಟ್, ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ದೋಷಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿ ನಿಭಾಯಿಸಲು ಪ್ರಬಲವಾದ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ: ಎರರ್ ಬೌಂಡರಿಗಳು. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಎರರ್ ಬೌಂಡರಿಗಳ ಪರಿಕಲ್ಪನೆಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಸ್ಥಿತಿಸ್ಥಾಪಕ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅವುಗಳ ಉದ್ದೇಶ, ಅನುಷ್ಠಾನ ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ.

ಎರರ್ ಬೌಂಡರಿಗಳ ಅಗತ್ಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಯಾವುದೇ ಕೋಡ್‌ನಂತೆ, ದೋಷಗಳಿಗೆ ಗುರಿಯಾಗುತ್ತವೆ. ಈ ದೋಷಗಳು ವಿವಿಧ ಮೂಲಗಳಿಂದ ಬರಬಹುದು, ಅವುಗಳೆಂದರೆ:

• ಅನಿರೀಕ್ಷಿತ ಡೇಟಾ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅನಿರೀಕ್ಷಿತ ರೂಪದಲ್ಲಿ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಬಹುದು, ಇದು ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ತಾರ್ಕಿಕ ದೋಷಗಳು: ಕಾಂಪೊನೆಂಟ್‌ನ ತರ್ಕದಲ್ಲಿನ ಬಗ್‌ಗಳು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ ಮತ್ತು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಬಾಹ್ಯ ಅವಲಂಬನೆಗಳು: ಬಾಹ್ಯ ಲೈಬ್ರರಿಗಳು ಅಥವಾ API ಗಳೊಂದಿಗಿನ ಸಮಸ್ಯೆಗಳು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ದೋಷಗಳನ್ನು ಹರಡಬಹುದು.

ಸರಿಯಾದ ದೋಷ ನಿರ್ವಹಣೆ ಇಲ್ಲದೆ, ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿನ ದೋಷವು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡಬಹುದು, ಇದು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಎರರ್ ಬೌಂಡರಿಗಳು ಈ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು ಮತ್ತು ಅವುಗಳನ್ನು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಮೇಲ್ಭಾಗಕ್ಕೆ ಹರಡುವುದನ್ನು ತಡೆಯಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ, ವೈಯಕ್ತಿಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ವಿಫಲವಾದಾಗಲೂ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರಿಗಳು ಎಂದರೇನು?

ಎರರ್ ಬೌಂಡರಿಗಳು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಅವು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಕ್ರ್ಯಾಶ್ ಆದ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯ ಬದಲಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಅವು ಸುರಕ್ಷತಾ ಜಾಲವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ದೋಷಗಳು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತವೆ.

ಎರರ್ ಬೌಂಡರಿಗಳ ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳು:

• ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮಾತ್ರ: ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿ ಅಳವಡಿಸಬೇಕು. ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ಹುಕ್‌ಗಳನ್ನು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ರಚಿಸಲು ಬಳಸಲಾಗುವುದಿಲ್ಲ.
• ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳು: ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಲು ಅವು ನಿರ್ದಿಷ್ಟ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳಾದ static getDerivedStateFromError() ಮತ್ತು componentDidCatch() ಅನ್ನು ಬಳಸುತ್ತವೆ.
• ಸ್ಥಳೀಯ ದೋಷ ನಿರ್ವಹಣೆ: ಎರರ್ ಬೌಂಡರಿಗಳು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿನ ದೋಷಗಳನ್ನು ಮಾತ್ರ ಹಿಡಿಯುತ್ತವೆ, ತಮ್ಮೊಳಗೆ ಅಲ್ಲ.

ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವುದು

ಒಂದು ಮೂಲಭೂತ ಎರರ್ ಬೌಂಡರಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನೋಡೋಣ:

1. ಎರರ್ ಬೌಂಡರಿ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸುವುದು

ಮೊದಲಿಗೆ, ErrorBoundary ಎಂಬ ಹೆಸರಿನ ಹೊಸ ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಿ:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    // ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿ ಇದರಿಂದ ಮುಂದಿನ ರೆಂಡರ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ತೋರಿಸುತ್ತದೆ.
    return {
      hasError: true
    };
  }

  componentDidCatch(error, errorInfo) {
    // ನೀವು ದೋಷವನ್ನು ದೋಷ ವರದಿ ಮಾಡುವ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಬಹುದು
    console.error("Caught error: ", error, errorInfo);
    // ಉದಾಹರಣೆಗೆ: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // ನೀವು ಯಾವುದೇ ಕಸ್ಟಮ್ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡಬಹುದು
      return (
        <div>
          <h2>ಏನೋ ತಪ್ಪಾಗಿದೆ.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

ವಿವರಣೆ:

• ಕನ್ಸ್ಟ್ರಕ್ಟರ್: ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು hasError: false ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
• static getDerivedStateFromError(error): ಈ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಅನ್ನು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಎಸೆದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇಲ್ಲಿ, ನಾವು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರಚೋದಿಸಲು hasError ಅನ್ನು true ಗೆ ಹೊಂದಿಸುತ್ತೇವೆ. ಇದು static ಮೆಥಡ್ ಆಗಿರುವುದರಿಂದ, ನೀವು ಫಂಕ್ಷನ್‌ನೊಳಗೆ this ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.
• componentDidCatch(error, errorInfo): ಈ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಅನ್ನು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಎಸೆದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಎರಡು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:
  • error: ಎಸೆಯಲ್ಪಟ್ಟ ದೋಷ.
  • errorInfo: ದೋಷ ಸಂಭವಿಸಿದ ಕಾಂಪೊನೆಂಟ್ ಸ್ಟಾಕ್ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಆಬ್ಜೆಕ್ಟ್. ಇದು ಡೀಬಗ್ ಮಾಡಲು ಅಮೂಲ್ಯವಾಗಿದೆ.

  ಈ ಮೆಥಡ್‌ನೊಳಗೆ, ನೀವು ದೋಷವನ್ನು ಸೈಂಟ್ರಿ, ರೋಲ್‌ಬಾರ್, ಅಥವಾ ಕಸ್ಟಮ್ ಲಾಗಿಂಗ್ ಪರಿಹಾರದಂತಹ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಬಹುದು. ಈ ಫಂಕ್ಷನ್‌ನೊಳಗೆ ನೇರವಾಗಿ ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಅಥವಾ ದೋಷವನ್ನು ಸರಿಪಡಿಸಲು ಪ್ರಯತ್ನಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ; ಇದರ ಪ್ರಾಥಮಿಕ ಉದ್ದೇಶ ಸಮಸ್ಯೆಯನ್ನು ಲಾಗ್ ಮಾಡುವುದಾಗಿದೆ.

• render(): ರೆಂಡರ್ ಮೆಥಡ್ hasError ಸ್ಟೇಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಅದು true ಆಗಿದ್ದರೆ, ಅದು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಒಂದು ಸರಳ ದೋಷ ಸಂದೇಶ). ಇಲ್ಲದಿದ್ದರೆ, ಅದು ಕಾಂಪೊನೆಂಟ್‌ನ ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

2. ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಬಳಸುವುದು

ಎರರ್ ಬೌಂಡರಿಯನ್ನು ಬಳಸಲು, ದೋಷವನ್ನು ಎಸೆಯಬಹುದಾದ ಯಾವುದೇ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ErrorBoundary ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಿರಿ:

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // ಈ ಕಾಂಪೊನೆಂಟ್ ದೋಷವನ್ನು ಎಸೆಯಬಹುದು
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

ಒಂದು ವೇಳೆ PotentiallyBreakingComponent ದೋಷವನ್ನು ಎಸೆದರೆ, ErrorBoundary ಅದನ್ನು ಹಿಡಿಯುತ್ತದೆ, ದೋಷವನ್ನು ಲಾಗ್ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

3. ಗ್ಲೋಬಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗೆ ವಿವರಣಾತ್ಮಕ ಉದಾಹರಣೆಗಳು

ರಿಮೋಟ್ ಸರ್ವರ್‌ನಿಂದ ಪಡೆದ ಉತ್ಪನ್ನ ಮಾಹಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸುವ ಇ-ಕಾಮರ್ಸ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ProductDisplay ಎಂಬ ಕಾಂಪೊನೆಂಟ್ ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡಲು ಜವಾಬ್ದಾರವಾಗಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸರ್ವರ್ ಕೆಲವೊಮ್ಮೆ ಅನಿರೀಕ್ಷಿತ ಡೇಟಾವನ್ನು ಹಿಂತಿರುಗಿಸಬಹುದು, ಇದು ರೆಂಡರಿಂಗ್ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // product.price ಸಂಖ್ಯೆಯಲ್ಲದಿದ್ದರೆ ಸಂಭಾವ್ಯ ದೋಷವನ್ನು ಅನುಕರಿಸಿ
  if (typeof product.price !== 'number') {
    throw new Error('Invalid product price');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

ಅಂತಹ ದೋಷಗಳಿಂದ ರಕ್ಷಿಸಲು, ProductDisplay ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ErrorBoundary ನೊಂದಿಗೆ ಸುತ್ತುವರಿಯಿರಿ:

// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Example Product',
    price: 'Not a Number', // ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ತಪ್ಪಾದ ಡೇಟಾ
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

ಈ ಸನ್ನಿವೇಶದಲ್ಲಿ, product.price ಅನ್ನು ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ಸಂಖ್ಯೆಯ ಬದಲು ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಹೊಂದಿಸಿರುವುದರಿಂದ, ProductDisplay ಕಾಂಪೊನೆಂಟ್ ದೋಷವನ್ನು ಎಸೆಯುತ್ತದೆ. ErrorBoundary ಈ ದೋಷವನ್ನು ಹಿಡಿಯುತ್ತದೆ, ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಮತ್ತು ಮುರಿದ ProductDisplay ಕಾಂಪೊನೆಂಟ್‌ನ ಬದಲು ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

4. ಅಂತರಾಷ್ಟ್ರೀಕರಣಗೊಂಡ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಎರರ್ ಬೌಂಡರಿಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ದೋಷ ಸಂದೇಶಗಳನ್ನು ಸ್ಥಳೀಕರಿಸಬೇಕು. ಅನುವಾದಿತ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಅಂತರಾಷ್ಟ್ರೀಕರಣ (i18n) ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ ಬಳಸಬಹುದು.

// ErrorBoundary.js (i18n ಬೆಂಬಲದೊಂದಿಗೆ)
import React from 'react';
import { useTranslation } from 'react-i18next'; // ನೀವು react-i18next ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸಲಾಗಿದೆ

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಫಾಲ್‌ಬ್ಯಾಕ್ UI ನಲ್ಲಿ ದೋಷದ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಸಂದೇಶವನ್ನು ಅನುವಾದಿಸಲು ನಾವು react-i18next ಅನ್ನು ಬಳಸುತ್ತೇವೆ. t('error.title') ಮತ್ತು t('error.message') ಫಂಕ್ಷನ್‌ಗಳು ಬಳಕೆದಾರರು ಆಯ್ಕೆ ಮಾಡಿದ ಭಾಷೆಯ ಆಧಾರದ ಮೇಲೆ ಸೂಕ್ತವಾದ ಅನುವಾದಗಳನ್ನು ಹಿಂಪಡೆಯುತ್ತವೆ.

5. ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಗಾಗಿ ಪರಿಗಣನೆಗಳು

ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರ್ ಮಾಡಿದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸುವಾಗ, ಸರ್ವರ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯಲು ದೋಷಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ನಿಭಾಯಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಸರ್ವರ್‌ನಲ್ಲಿ ರೆಂಡರಿಂಗ್ ದೋಷಗಳಿಂದ ಚೇತರಿಸಿಕೊಳ್ಳಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಲು ರಿಯಾಕ್ಟ್‌ನ ದಸ್ತಾವೇಜನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ. ಬದಲಿಗೆ, ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವ ಮೊದಲು ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಿ, ಅಥವಾ ಸರ್ವರ್‌ನಲ್ಲಿ ಸ್ಥಿರ ದೋಷ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಿ.

ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಗ್ರ್ಯಾನ್ಯುಲರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯಿರಿ: ವೈಯಕ್ತಿಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಅಥವಾ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸಣ್ಣ ವಿಭಾಗಗಳನ್ನು ಎರರ್ ಬೌಂಡರಿಗಳೊಂದಿಗೆ ಸುತ್ತುವರಿಯಿರಿ. ಇದು ಒಂದೇ ದೋಷವು ಸಂಪೂರ್ಣ UI ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನ ಬದಲು ನಿರ್ದಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯಗಳು ಅಥವಾ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡಿ: ದೋಷಗಳನ್ನು ಮಾನಿಟರಿಂಗ್ ಸೇವೆಗೆ ಲಾಗ್ ಮಾಡಲು componentDidCatch() ಮೆಥಡ್ ಅನ್ನು ಬಳಸಿ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿನ ಸಮಸ್ಯೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಸೈಂಟ್ರಿ, ರೋಲ್‌ಬಾರ್, ಮತ್ತು ಬಗ್‌ಸ್ನ್ಯಾಗ್‌ನಂತಹ ಸೇವೆಗಳು ದೋಷ ಟ್ರ್ಯಾಕಿಂಗ್ ಮತ್ತು ವರದಿಗಾಗಿ ಜನಪ್ರಿಯ ಆಯ್ಕೆಗಳಾಗಿವೆ.
• ಮಾಹಿತಿಯುಕ್ತ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಒದಗಿಸಿ: ಫಾಲ್‌ಬ್ಯಾಕ್ UI ನಲ್ಲಿ ಬಳಕೆದಾರ ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಿ. ತಾಂತ್ರಿಕ ಪರಿಭಾಷೆಯನ್ನು ತಪ್ಪಿಸಿ ಮತ್ತು ಹೇಗೆ ಮುಂದುವರಿಯಬೇಕು ಎಂಬುದರ ಕುರಿತು ಸೂಚನೆಗಳನ್ನು ನೀಡಿ (ಉದಾ., ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿ, ಬೆಂಬಲವನ್ನು ಸಂಪರ್ಕಿಸಿ). ಸಾಧ್ಯವಾದರೆ, ಬಳಕೆದಾರರು ತೆಗೆದುಕೊಳ್ಳಬಹುದಾದ ಪರ್ಯಾಯ ಕ್ರಿಯೆಗಳನ್ನು ಸೂಚಿಸಿ.
• ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ: ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಎರರ್ ಬೌಂಡರಿಯೊಂದಿಗೆ ಸುತ್ತುವರಿಯುವುದನ್ನು ತಪ್ಪಿಸಿ. ಬಾಹ್ಯ API ಗಳಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಅಥವಾ ಸಂಕೀರ್ಣ ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳಂತಹ ದೋಷಗಳು ಹೆಚ್ಚಾಗಿ ಸಂಭವಿಸುವ ಪ್ರದೇಶಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ.
• ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಎರರ್ ಬೌಂಡರಿಗಳು ಅವು ಸುತ್ತುವರಿದ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಉದ್ದೇಶಪೂರ್ವಕವಾಗಿ ದೋಷಗಳನ್ನು ಎಸೆಯುವ ಮೂಲಕ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಫಾಲ್‌ಬ್ಯಾಕ್ UI ನಿರೀಕ್ಷೆಯಂತೆ ಪ್ರದರ್ಶಿಸಲ್ಪಟ್ಟಿದೆಯೇ ಮತ್ತು ದೋಷಗಳು ಸರಿಯಾಗಿ ಲಾಗ್ ಆಗಿವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಯುನಿಟ್ ಟೆಸ್ಟ್‌ಗಳು ಅಥವಾ ಇಂಟಿಗ್ರೇಷನ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಿರಿ.
• ಎರರ್ ಬೌಂಡರಿಗಳು ಇವುಗಳಿಗಾಗಿ ಅಲ್ಲ:
  • ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು
  • ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್ (ಉದಾ., setTimeout ಅಥವಾ requestAnimationFrame ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು)
  • ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್
  • ಎರರ್ ಬೌಂಡರಿಯಲ್ಲೇ (ಅದರ ಚಿಲ್ಡ್ರನ್‌ಗಳ ಬದಲಿಗೆ) ಎಸೆಯಲ್ಪಟ್ಟ ದೋಷಗಳು

ಸುಧಾರಿತ ದೋಷ ನಿರ್ವಹಣಾ ಕಾರ್ಯತಂತ್ರಗಳು

1. ಮರುಪ್ರಯತ್ನದ ಕಾರ್ಯವಿಧಾನಗಳು

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ದೋಷಕ್ಕೆ ಕಾರಣವಾದ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಮರುಪ್ರಯತ್ನಿಸುವ ಮೂಲಕ ದೋಷದಿಂದ ಚೇತರಿಸಿಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಯು ವಿಫಲವಾದರೆ, ನೀವು ಅದನ್ನು ಸ್ವಲ್ಪ ವಿಳಂಬದ ನಂತರ ಮರುಪ್ರಯತ್ನಿಸಬಹುದು. ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಮರುಪ್ರಯತ್ನದ ಕಾರ್ಯವಿಧಾನಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು.

// ErrorBoundaryWithRetry.js
import React from 'react';

class ErrorBoundaryWithRetry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // ಇದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ. ನಿಯಂತ್ರಿತ ಪ್ರಾಪ್‌ಗಳೊಂದಿಗೆ ಉತ್ತಮ ಮಾದರಿಗಳನ್ನು ಪರಿಗಣಿಸಿ.
      this.forceUpdate(); // ಎಚ್ಚರಿಕೆ: ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>ಏನೋ ತಪ್ಪಾಗಿದೆ.</h2>
          <button onClick={this.handleRetry}>ಮರುಪ್ರಯತ್ನಿಸಿ</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

ErrorBoundaryWithRetry ಕಾಂಪೊನೆಂಟ್ ಒಂದು ಮರುಪ್ರಯತ್ನ ಬಟನ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ, ಅದನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, hasError ಸ್ಟೇಟ್ ಅನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ ಮತ್ತು ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಮರುಪ್ರಯತ್ನಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸೀಮಿತಗೊಳಿಸಲು ನೀವು retryCount ಅನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು. ಈ ವಿಧಾನವು ತಾತ್ಕಾಲಿಕ ನೆಟ್‌ವರ್ಕ್ ಸ್ಥಗಿತಗಳಂತಹ ಅಸ್ಥಿರ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಲು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ. onRetry ಪ್ರಾಪ್ ಅನ್ನು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ನಿರ್ವಹಿಸಲಾಗಿದೆಯೆ ಮತ್ತು ದೋಷಕ್ಕೆ ಕಾರಣವಾಗಿರಬಹುದಾದ ತರ್ಕವನ್ನು ಮರು-ಪಡೆಯುತ್ತದೆ/ಮರು-ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

2. ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳು

ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳು ಹೊಸ ಕೋಡ್ ಅನ್ನು ನಿಯೋಜಿಸದೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿನ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಲು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ದೋಷದ ಸಂದರ್ಭದಲ್ಲಿ ಕಾರ್ಯವನ್ನು ಆಕರ್ಷಕವಾಗಿ ಡಿಗ್ರೇಡ್ ಮಾಡಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಒಂದು ನಿರ್ದಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯವು ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತಿದ್ದರೆ, ನೀವು ಅದನ್ನು ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್ ಬಳಸಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯವು ತಾತ್ಕಾಲಿಕವಾಗಿ ಲಭ್ಯವಿಲ್ಲ ಎಂದು ಬಳಕೆದಾರರಿಗೆ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು.

3. ಸರ್ಕ್ಯೂಟ್ ಬ್ರೇಕರ್ ಪ್ಯಾಟರ್ನ್

ಸರ್ಕ್ಯೂಟ್ ಬ್ರೇಕರ್ ಪ್ಯಾಟರ್ನ್ ಒಂದು ಸಾಫ್ಟ್‌ವೇರ್ ವಿನ್ಯಾಸ ಮಾದರಿಯಾಗಿದ್ದು, ವಿಫಲಗೊಳ್ಳುವ ಸಾಧ್ಯತೆಯಿರುವ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಅಪ್ಲಿಕೇಶನ್ ಪದೇ ಪದೇ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸುವುದನ್ನು ತಡೆಯಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಕಾರ್ಯಾಚರಣೆಯ ಯಶಸ್ಸು ಮತ್ತು ವೈಫಲ್ಯದ ದರಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು, ವೈಫಲ್ಯದ ದರವು ಒಂದು ನಿರ್ದಿಷ್ಟ ಮಿತಿಯನ್ನು ಮೀರಿದರೆ, "ಸರ್ಕ್ಯೂಟ್ ಅನ್ನು ತೆರೆಯುತ್ತದೆ" ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಅವಧಿಗೆ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮುಂದಿನ ಪ್ರಯತ್ನಗಳನ್ನು ತಡೆಯುತ್ತದೆ. ಇದು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ವೈಫಲ್ಯಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ಸ್ಥಿರತೆಯನ್ನು ಸುಧಾರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸರ್ಕ್ಯೂಟ್ ಬ್ರೇಕರ್ ಪ್ಯಾಟರ್ನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಎರರ್ ಬೌಂಡರಿಯು ದೋಷವನ್ನು ಹಿಡಿದಾಗ, ಅದು ವೈಫಲ್ಯದ ಕೌಂಟರ್ ಅನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ವೈಫಲ್ಯದ ಕೌಂಟರ್ ಮಿತಿಯನ್ನು ಮೀರಿದರೆ, ಎರರ್ ಬೌಂಡರಿಯು ವೈಶಿಷ್ಟ್ಯವು ತಾತ್ಕಾಲಿಕವಾಗಿ ಲಭ್ಯವಿಲ್ಲ ಎಂದು ಬಳಕೆದಾರರಿಗೆ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಬಹುದು ಮತ್ತು ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮುಂದಿನ ಪ್ರಯತ್ನಗಳನ್ನು ತಡೆಯಬಹುದು. ನಿರ್ದಿಷ್ಟ ಅವಧಿಯ ನಂತರ, ಎರರ್ ಬೌಂಡರಿಯು "ಸರ್ಕ್ಯೂಟ್ ಅನ್ನು ಮುಚ್ಚಬಹುದು" ಮತ್ತು ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಮತ್ತೆ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸಲು ಅನುಮತಿಸಬಹುದು.

ತೀರ್ಮಾನ

ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರಿಗಳು ದೃಢವಾದ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಿದೆ. ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಅಳವಡಿಸುವ ಮೂಲಕ, ನೀವು ದೋಷಗಳು ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕ್ರ್ಯಾಶ್ ಮಾಡುವುದನ್ನು ತಡೆಯಬಹುದು, ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಆಕರ್ಷಕವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಒದಗಿಸಬಹುದು, ಮತ್ತು ಡೀಬಗ್ಗಿಂಗ್ ಮತ್ತು ವಿಶ್ಲೇಷಣೆಗಾಗಿ ಮಾನಿಟರಿಂಗ್ ಸೇವೆಗಳಿಗೆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡಬಹುದು. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಿತ ಕಾರ್ಯತಂತ್ರಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ಅನಿರೀಕ್ಷಿತ ದೋಷಗಳ ಮುಖಾಂತರವೂ ಸ್ಥಿತಿಸ್ಥಾಪಕ, ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಸಕಾರಾತ್ಮಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುವ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಸ್ಥಳೀಕರಿಸಿದ ಸಹಾಯಕ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸುವುದರ ಮೇಲೆ ಗಮನಹರಿಸಲು ಮರೆಯದಿರಿ.